$(function() {
    // 1、点击搜索按钮
    $('#search-btn').on('click', function() {
        /* 2、获取用户输入的关键字，判断是否为空，
            假如没有输入则禁止跳转并提示
            假如输入了关键字就跳转并带过去关键字 */
        var keyword = $(this).siblings().val();
        if (keyword) {
            location.href = "search-result.html?keyword=" + keyword;
            // 3、存储用户输入的关键字到数组中，方便渲染搜索历史
            keyArr.push(keyword);
            // 4、将数组存储在本地存储中，刷新不会消失,只能存字符串
            localStorage.setItem('keyArr', JSON.stringify(keyArr));
            console.log(keyArr);
        } else {
            alert('请输入搜索关键字');
            return;
        }
    });

    // 渲染搜索历史
    // 1、先定义一个空数组，用来存储用户的搜索历史关键字
    var keyArr = [];
    // 2、获取本地存储的用户历史关键字,页面一刷新的时候就渲染到页面中
    var keys = localStorage.getItem('keyArr');
    if (keys) {
        keyArr = JSON.parse(keys); //字符串转为数组，赋值给数组
        var html = template('tem-key', { res: keyArr });
        $('#key-history').html(html);
    }

    // 清空搜索历史
    $('#clear-history').on('click', function() {
        // 1、清空页面上的历史记录
        $('#key-history').html('');
        // 2、删除本地存储的历史记录
        localStorage.removeItem('keyArr');
        // 3、清空数组
        keyArr = [];
    })
});